<template>
  <van-nav-bar
    class="search"
    :title="title"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="body">
    <van-form @submit="onSave">
      <van-field
        v-model="user.phone"
        name="手机号码"
        label="手机号码"
        placeholder="手机号码"
        :readonly="title != '注册'"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="user.username"
        name="用户名称"
        label="用户名称"
        placeholder="用户名称"
        :rules="[{ required: true, message: '请填写用户名称' }]"
      />
      <van-field
        v-model="user.nickname"
        name="用户昵称"
        label="用户昵称"
        placeholder="用户昵称"
      />
      <van-field
        v-if="title === '注册'"
        v-model="user.password"
        type="password"
        name="密 码"
        label="密 码"
        placeholder="密 码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-if="title === '注册'"
        v-model="user.password_two"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请再次填写密码' }]"
      />
      <van-field
        v-model="user.email"
        name="邮 箱"
        label="邮 箱"
        placeholder="邮 箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      <van-field
        v-model="user.photo"
        name="头像地址"
        label="头像地址"
        placeholder="头像地址"
        :rules="[{ required: true, message: '请填写头像地址' }]"
      />
      <van-field name="radio" label="性 别">
        <template #input>
          <van-radio-group v-model="user.gender" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="address"
        clickable
        name="area"
        label="地区"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          {{ title === "注册" ? "注册" : "保存" }}
        </van-button>
      </div>
    </van-form>
    <div class="photo" v-if="user.photo">
      <van-image round width="100px" height="100px" :src="user.photo" />
    </div>
  </div>
</template>

<script lang="ts">
import { UserService } from "@/api/user";
import { Notify, Toast } from "vant";
import { areaList } from "@vant/area-data";

import { reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "UserDetail",
  setup(props: any) {
    const router = useRouter();
    const route = useRoute();
    const initUser = {
      phone: "",
      password: "",
      password_two: "",
      photo: "",
      gender: "",
      email: "",
      country: "中国",
      city: "",
      region: "",
      address: "",
      username: "",
      nickname: "",
    };

    const data = reactive({
      title: route.query.title,
      user: { ...initUser },
      address: "",
      showArea: false,
      areaList,
    });
    const onClickLeft = () => {
      router.go(-1);
    };
    const onConfirm = (a: any) => {
      data.user.city = a[0].name;
      data.user.region = a[1].name;
      data.user.address = a[2].name;
      data.showArea = false;
      data.address = `${a[0].name} ${a[1].name} ${a[2].name}`;
    };
    const onSave = () => {
      if (data.title === "注册") {
        if (data.user.password !== data.user.password_two) {
          Notify({ type: "danger", message: "请确实两次输入密码一致" });
          return;
        }
        UserService.addUser(data.user).then((res) => {
          if (res.data.code === 0) {
            Toast("注册成功");
            router.push({ name: "userlogin" });
          } else {
            Notify({ type: "danger", message: res.data.message });
          }
        });
      } else {
        UserService.updateUser(data.user).then((res) => {
          if (res.data.code === 0) {
            Toast("修改成功");
            router.push({ name: "Me" });
          } else {
            Notify({ type: "danger", message: res.data.message });
          }
        });
      }
    };
    const getUser = () => {
      if (route.query.title === "注册") {
        data.user = { ...initUser };
      } else {
        UserService.userinfo().then((res) => {
          if (res.data.code === 112) {
            Notify({ type: "danger", message: "用户还没登录" });
            return;
          }
          const { city, region, address } = res.data.data;
          data.user = res.data.data;
          data.address = `${city} ${region} ${address}`;
        });
      }
    };
    getUser();
    return {
      ...toRefs(data),
      onClickLeft,
      onSave,
      onConfirm,
    };
  },
};
</script>

<style lang="less" scoped>
.search {
  position: fixed;
  z-index: 999;
  top: 0;
  height: 50px;
  width: 100%;
}
.body {
  margin-top: 50px;
}
.photo {
  margin-top: 30px !important;
  width: 100px;
  height: 100px;
  margin: auto;
}
</style>